<template>
  <div>
    <div class="content">
      <div class="title">项目列表</div>
      <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo" router>
        <template v-for="item in data">
          <el-menu-item :index="'/project/detail/' + String(item.id)">{{item.name}}</el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: 'project',
  data () {
    return {
      data: [],
      companyId: 1
    }
  },
  mounted: function () {
    this.requestData()
  },
  methods: {
    requestData () {
      let user = JSON.parse(sessionStorage.getItem('user'))
      if (user) {
        this.companyId = user.id
      }
      this.$http.get('/project?company_id=' + this.companyId).then((res) => {
        this.data = res.data
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.content {
  margin: 20px;
  padding: 20px;
  border: 1px solid #e7ecf1;

  .title {
    height: 48px;
    line-height: 48px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eef1f5;
  }
}
.el-menu {
  background-color: #fff;
}

li.el-menu-item {
  border: 1px solid #fafafa;
  background-color: #eef1f6;
  margin-bottom: 5px;
}
</style>
